import React from 'react'
import styled from 'styled-components'
import i18next from 'i18next'
import Container from '../Container'
import Logo from '../Logo'

import AccountButton from './components/AccountButton'
import Nav from './components/Nav'
import {NavLink, useLocation,Route,Router,withRouter} from 'react-router-dom'
import {
    DropDownTitle,
    DropDownWrap,
    MainDropDown,
    ConnectWallet,
    FlexView,
    WinView,
    MobileView,
    SwitchButton
} from '../components'
import ImageCommon from "../../assets/image/common/ImageCommon";
import { useTranslation } from 'react-i18next'
import TxButton from './components/TxButton'

const TopBar = withRouter((props) => {
    const {t} = useTranslation();
    function changeLan(e:any) {
        switch (e.key) {
            case "cn":
                i18next.changeLanguage("zh");
                break;
            case "en":
                i18next.changeLanguage("en");
                break;
            default:

        }
    }
    function changeMenu(e:any) {
        props.history.push(e.key)
    }
    return (
        <div
            style={{position: "relative", zIndex: 1}}
        >
            <StyledTopBarInner>
                <LogoFlex>
                    <StyledTopBar1 to="/">
                        <Logo/>
                    </StyledTopBar1>
                    <StyledTopBarpc>
                        <Nav/>
                        <div
                            style={{flex:1}}
                        ></div>
                    </StyledTopBarpc>
                    <StyledTopBarpcTop>
                        <TxButton />
                        {/*<AccountButton />*/}
                        <WinView>
                            <SwitchButton></SwitchButton>
                        </WinView>
                        <ConnectWallet></ConnectWallet>
                        <WinView>
                            <DropDownWrap
                                marginRight={'15px'}
                            >
                                <IconSetting
                                    src={ImageCommon.icon_setting}
                                ></IconSetting>
                            </DropDownWrap>
                        </WinView>
                        <MainDropDown
                            title={t('cn')}
                            menus={[{title:t('cn'),key:"cn"},{title:t('en'),key:"en"}]}
                            onClick={changeLan}
                        ></MainDropDown>
                        <MobileView>
                            <MainDropDown
                                marginLeft={'15px'}
                                title={t('menu')}
                                menus={[
                                    {title:t('ocean'),key:"/"},
                                    {title:t('atlantis'),key:"/Atlantis"},
                                    {title:t('cay'),key:"/Cay"},
                                    {title:"合成",key:"/Combine"},
                                    {title:t('picbook'),key:"/Picbook"},
                                    {title:t('market'),key:"/Market"},
                                    {title:"我的鱼卡",key:"/MyFishCard"},
                                ]}
                                onClick={changeMenu}
                            ></MainDropDown>
                        </MobileView>
                    </StyledTopBarpcTop>
                </LogoFlex>


                {/*<StyledTopBarh5>*/}
                {/*    <Nav/>*/}
                {/*</StyledTopBarh5>*/}
            </StyledTopBarInner>
        </div>
    )
})


type banner_type = {
    bg: string
}
export const IconSetting = styled.img`
  width:18px;
  height:18px;
`
export const StyledTopBar = styled.div<banner_type>`
  background-image:url(${props => props.bg});
  background-size:cover;
  background-position:center;
  height:480px;
  width:100%;
  position:relative;
  top:-72px;
  z-index:0;
  overflow:hidden;
  @media (max-width: 768px) {
    height:240px;
  };
`
export const LogoFlex = styled.div`
    display:flex;
    flex:1;
    overflow:hidden;
    align-items:center;
    @media (max-width: 768px) {
        padding-top: 10px;
        padding-bottom: 10px;
        justify-content: space-between;
    };
`
const Span1 = styled.a`
  color: #fff;
  line-height: 36px;
  margin-left: 8px;
  text-decoration:none;
`

const StyledTopBarpc = styled.div`
    display: flex;
    flex:1;
    @media (max-width: 768px) {
      display: none;
    };
`


const StyledTopBarpcTop = styled.div`
    display: flex;
    justify-content: flex-end;
    margin-left: 17px; 
    @media (max-width: 768px) {
      margin-left: 5px; 
        transform:scale(0.8);
    };
`

const StyledTopBarh5 = styled.div`
display: none;
@media (max-width: 768px) {
  display: block;
  width: 100%;
};
`

const StyledTopBar1 = styled(NavLink)`
    @media (max-width: 768px) {
      display:flex;
      align-items:center;
      justify-content:center;
    };
`

const StyledTopBarInner = styled.div`
  align-items: center;
  display: flex;
  height: ${props => props.theme.topBarSize}px;
  flex:1;
  flex-wrap: wrap;
  margin-left:24px;
  margin-right:24px;
  @media (max-width: 768px) {
    margin-left:10px;
    margin-right:10px;
    display:block;
  };
`

export default TopBar
